<template>
	<view class="outBox">
		<!-- 填补空白 -->
		<u-cell-group class="cells" style="background-color: white;">
			<u-cell title="修改手机号码" v-if="state.userInfo.tel" :isLink="true" @click="operate('phone')" :value="`${state.userInfo.tel.slice(0,3)}****${state.userInfo.tel.slice(8,12)}`" arrow-direction="right" size="large">
				<template #icon>
					<view class="left-icon" style="background-color:#f3d19e;">
						<image src="../../static/protectAccount/phone.svg"></image>
					</view>
				</template>
			</u-cell>
			<u-cell title="修改密码" :isLink="true" @click="operate('password')" arrow-direction="right" size="large">
				<template #icon>
					<view class="left-icon" style="background-color:#c8c9cc;">
						<image src="../../static/protectAccount/password.svg"></image>
					</view>
				</template>
			</u-cell>
			<u-cell title="绑定微信" :isLink="true" @click="operate('wechat')" arrow-direction="right" :value="state.userInfo.wechatId?'已绑定':'未绑定'" size="large">
				<template #icon>
					<view class="left-icon" style="background-color: rgb(40,196,69);">
						<image src="../../static/protectAccount/wechat.svg"></image>
					</view>
				</template>
			</u-cell>
			<u-cell title="绑定支付宝" :isLink="true" @click="operate('zhifubao')" arrow-direction="right" size="large">
				<template #icon>
					<view class="left-icon" style="background-color: rgb(6, 180, 253);">
						<image src="../../static/protectAccount/zhifubao.svg"></image>
					</view>
				</template>
			</u-cell>
			<u-cell title="绑定他人" :isLink="true" @click="operate('yonghu')" arrow-direction="right" size="large">
				<template #icon>
					<view class="left-icon" style="background-color:#E4E7ED;">
						<image src="../../static/protectAccount/bangding.svg"></image>
					</view>
				</template>
			</u-cell>
		</u-cell-group>
		<!-- 提示框 -->
		<u-toast style="z-index: 100;" ref="utoast"></u-toast>
		<!-- 文字提示确认框 -->
		<u-modal :show="state.showModal" :title="state.modalTitle" showCancelButton :content='state.modalContent' @cancel="cancelWechat" @confirm="removeWechat"></u-modal>
		<!-- 验证码提示框 -->
		<u-modal :show="state.phoneShow" @cancel="closeSendCheck" @confirm="nextSendCheck" :title="state.phoneTitle" showCancelButton >
			<view class="slot-content">
				<view class="inputBox">
					<input type="text" v-model="state.newPhone" :placeholder="state.placeHolder" style="width: 100%;height: 100%;">
				</view>
				<view class="inputBox" v-if="state.placeHolder == '请输入旧手机号'">
					<input type="text" v-model="state.myCheckNum" placeholder="输入验证码" style="width: 60%;height: 100%;">
					<view class="sendYZM" @click="sendCheck">
						{{state.sendCheck}}
					</view>
				</view>
			</view>
		</u-modal>
		<!-- 修改密码的两种方式选择 -->
		<u-picker :show="state.changePasswordShow" :columns="state.passwordWay" @cancel="closePick" @confirm="selectWay"></u-picker>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		reactive, ref
	} from "vue";
	// 数据源
	const state = reactive({
		token: '',
		userInfo:{},
		showModal:false,
		modalTitle:'确定要解除微信绑定吗?',
		modalContent:'解除微信绑定后将无法再使用该微信进行简记账登录。',
		phoneShow:false,
		phoneTitle:'更换手机号',
		placeHolder:'请输入旧手机号',
		newPhone:'',
		checkNum:'',
		myCheckNum:'',
		sendCheck:'发送验证码',
		changePasswordShow:false,
		passwordWay:[
			['通过旧密码修改', '通过手机验证码修改']
		]
	})
	const utoast = ref(null)
	// 生命周期
	onLoad(() => {
		getToken()
		
	})
	// 获取token令牌
	const getToken = () => {
		uni.getStorage({
			key: 'Authorization',
			success: (res) => {
				state.token = res.data;
				upUserInfo()
			}
		})
	}
	// 更新用户数据信息
	const upUserInfo = ()=>{
		uni.request({
			url:'http://124.221.162.230:8888/user/getById',
			method:'POST',
			header:{
				Authorization:state.token
			},
			success: (res) => {
				let value = res.data.data;
				state.userInfo = value
			}
		})
	}
	// 点击单元格事件
	const operate = (id) => {
		if (id == 'phone') {
			changePhone()
		} else if (id == 'password') {
			changePassword()
		} else if (id == 'wechat') {
			changeWechat()
		} else if (id == 'zhifubao') {
			changeZhifubao()
		}else if(id == 'yonghu'){
			changeYonghu()
		}
	}
	// 修改手机号
	const changePhone = () => {
		// 弹出提示框
		state.phoneShow = true
	}
	// 发送验证码
	const sendCheck = () =>{
		let timer;
		let tost = utoast;
		if(state.sendCheck == '发送验证码'){
			let re = /^1[3,4,5,6,7,8,9][0-9]{9}$/;
			let result = re.test(state.newPhone);
			if(!result) {
				tost.value.show({
					type: 'error',
					icon: false,
					title: '失败主题',
					message: "手机号格式不正确",
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
				})
			}else{
				uni.request({
					url:'http://124.221.162.230:8888/account/sendCode',
					method:'POST',
					header:{
						'Authorization':state.token
					},
					data:{
						tel:state.newPhone
					},
					success: (res) => {
						state.checkNum = res.data.data
					}
				})
				state.sendCheck = 120;
				timer = setInterval(()=>{
					state.sendCheck = state.sendCheck - 1;
					if(state.sendCheck<0){
						clearInterval(timer);
						state.sendCheck = '发送验证码'
					}
				},1000)
			}
		}
	}
	// 取消验证码框
	const closeSendCheck = ()=>{
		state.phoneShow = false;
		state.placeHolder = '请输入旧手机号'
		state.newPhone = '';
		state.checkNum='';
		state.myCheckNum='';
	}
	// 确定验证码
	const nextSendCheck = ()=>{
		let tost = utoast;
		if(state.placeHolder == '请输入旧手机号'){
			if(state.checkNum == state.myCheckNum){
				state.newPhone = '';
				state.checkNum = '';
				state.myCheckNum = '';
				state.placeHolder = '请输入新手机号'
			}
		}else{
			uni.request({
				url:'http://124.221.162.230:8888/account/updateTel',
				method:'POST',
				header:{
					'Authorization':state.token
				},
				data:{
					newTel:state.newPhone
				},
				success: (res) => {
					if(res.data.code == 200){
						uni.removeStorage({
							key:'Authorization',
							success: () => {
								uni.setStorage({
									key:'Authorization',
									data:res.data.data,
									success: () => {
										tost.value.show({
											type: 'success',
											title: '成功主题',
											message: "手机号绑定成功",
											iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
										})
										setTimeout(()=>{
											state.newPhone = '';
											state.checkNum = '';
											state.myCheckNum = '';
											state.placeHolder = '请输入旧手机号'
											state.phoneShow = false
										},100)
									}
								})
							}
						})
					}else{
						tost.value.show({
							type: 'error',
							icon: false,
							title: '失败主题',
							message: "手机号未绑定成功",
							iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
						})
						setTimeout(()=>{
							state.newPhone = '';
							state.checkNum = '';
							state.myCheckNum = '';
							state.placeHolder = '请输入旧手机号'
							state.phoneShow = false
						},100)
					}
				}
			})
		}
		// state.phoneShow = false;
	}
	// 修改密码
	const changePassword = () => {
		state.changePasswordShow = true
	}
	// 关闭选择框
	const closePick = () =>{
		state.changePasswordShow = false
	}
	// 获取修改方式
	const selectWay = (e) =>{
		state.changePasswordShow = false
		uni.navigateTo({
			url:`/pages/changePassword/changePassword?name=${e.value[0]}`
		})
	}
	// 查询是否已绑定
	const changeWechat = () => {
		if(state.userInfo.wechatId){
			state.showModal = true
		}else{
			wechatBind()
		}
	}
	// 取消解除微信绑定
	const cancelWechat = () =>{
		state.showModal = false
	}
	// 解除微信绑定
	const removeWechat = () =>{
		let tost = utoast;
		uni.request({
			url:'http://124.221.162.230:8888/account/deleteWx',
			method:'POST',
			header:{
				Authorization:state.token
			},
			success: (res) => {
				if(res.data.code == 200){
					state.showModal = false
					tost.value.show({
						type: 'success',
						title: '成功主题',
						message: "微信解绑成功",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png',
					})
					upUserInfo()
				}else{
					
				}
			},
			fail: (err) => {
				console.log(err)
			}
		})
	}
	// 微信绑定
	const wechatBind = ()=>{
		uni.login({
			provider: 'weixin',
			// onlyAuthorize: true,
			success: function(loginRes) {
				let onj = loginRes.authResult;
				state.aa = JSON.stringify(loginRes)
				uni.getUserInfo({
					provider: 'weixin',
					success: function(info) {
						sendOpenid(info.userInfo.openId)
						// state.res = JSON.stringify(info)
					}
				})
			}
		})
	}
	// 将拿到的微信openid给后端
	const sendOpenid = (id) =>{
		let tost = utoast;
		uni.request({
			url:'http://124.221.162.230:8888/account/saveWxByOpenId',
			method:'POST',
			header:{
				Authorization:state.token
			},
			data:{
				openId:id
			},
			success: (res) => {
				if(res.data.code == 200){
					tost.value.show({
						type: 'success',
						title: '成功主题',
						message: "微信授权成功",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
					})
					upUserInfo()
				}
			},
			fail: (err) => {
				console.log(err)
			}
		})
	}
	// 绑定支付宝
	const changeZhifubao = () => {
	
	}
	// 建立websocket链接
	const changeYonghu = ()=>{
		let obj = JSON.stringify(state.userInfo)
		uni.navigateTo({
			url:`/pages/query/query?userInfo=${obj}`
		})
		// uni.connectSocket({
		// 	url:`http://124.221.162.230:8888/websocket/${state.userInfo.id}`,
		// 	method:'POST',
		// 	header:{
		// 		Authorization:state.token
		// 	},
		// 	success: (res) => {
		// 		// console.log(res)
		// 		listenWebsocket()
		// 	},
		// 	fail: (err) => {
		// 		console.log(err)
		// 	}
		// })
	}
	// 监听websocket打开事件
	const listenWebsocket = () =>{
		uni.onSocketOpen((res)=>{
			// console.log(res)
			sendWebsocket()
			listenWebsocketData()
		})
	}
	// 通过建立起的websocket发送数据
	const sendWebsocket = () =>{
		uni.sendSocketMessage({
			data:'15605',
			success: (res) => {
				console.log(res)
			}
		})
	}
	// 监听websocket返回数据事件
	const listenWebsocketData = ()=>{
		uni.onSocketMessage((res)=>{
			console.log(JSON.parse(res.data))
		})
	}
</script>

<style lang="less" scoped>
	.outBox {
		padding-top: 14rpx;
		box-sizing: border-box;
		width: 100vw;
		height: 100%;
		background-color: #f8f8f8;
		border-top: 2rpx solid #c8c7cc;
		.cells{
			.left-icon{
				display: flex;
				border-radius: 50%;
				padding: 10rpx;
				box-sizing: border-box;
				image{
					width: 50rpx;
					height: 50rpx;
				}
			}
		}
		.inputBox{
			width: 100%;
			height:80rpx;
			margin-bottom: 30rpx;
			border: 2rpx solid #4f4f4f;
			border-radius: 6rpx;
			display: flex;
			align-items: center;
			padding-left: 10rpx;
			box-sizing: border-box;
			.sendYZM{
				width: 40%;
				height: 90%;
				border: 2rpx solid #c8c7cc;
				white-space: nowrap;
				border-radius: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>